// 入口函数
$(function () {
 // 定义一个全局变量对象
 // 将来筛选和分页都可以修改
 let query = {
  pagenum: 1, //	是	int	页码值
  pagesize: 5, //	是	int	每页显示多少条数据
  cate_id: '', //否	string	文章分类的 Id
  state: '' //否	string	文章的状态，可选值有：已发布、草稿
 }

 // 需求1: 展示文章列表
 let layer = layui.layer
 // 调用函数
 initArticleList()
 // 封装成函数,后面的分页/筛选/删除会用到
 function initArticleList() {
  // 发送请求
  axios({
   method: 'GET',
   url: '/my/article/list',
   params: query
  }).then(res => {
   // 判断
   if (res.data.status != 0) {
    return layer.msg(res.data.message)
   }
   // console.log(res.data);
   // 成功后渲染
   let arr = []
   // 循环遍历
   res.data.data.forEach(ele => {
    // console.log(ele);
    arr.push(`
             <tr>
             <td>${ele.title}</td>
             <td>${ele.cate_name}</td>
             <td>${dateFormat(ele.pub_date)}</td>
             <td>${ele.state}</td>
             <td>
               <a href="/article/art_edit.html?id=${ele.Id}" class="layui-btn layui-btn-xs">
                 编辑
               </a>
               <button type="button" data-id="${ele.Id}" class="btn-delete layui-btn layui-btn-xs layui-btn-danger">
                 删除
               </button>
             </td>
           </tr>
    `)
   })
   // 循环之外赋值给父元素
   let str = arr.join("")
   $('tbody').empty().html(str)
   //赋值之后做分页  调用分页函数
   pageRender(res.data.total)

  })

 }

 // 需求2: 初始化文章分类
 let form = layui.form

 // 封装函数
 initArtCateList()

 function initArtCateList() {
  // 发送请求
  axios({
   method: 'GET',
   url: '/my/article/cates'
  }).then(res => {
   ///  判断
   if (res.data.status != 0) {
    return layer.msg(res.data.message)
   }
   // 成功获取后  渲染
   let arr = [`<option value="">请选择文章类别</option>`]
   // 循环遍历
   res.data.data.forEach(ele => {
    arr.push(`
    <option value="${ele.Id}">${ele.name}</option>
          
    `)
   })
   // 循环之外赋值
   let str = arr.join("")
   $('[name=cate_id]').empty().html(str)
   //  form表单同步渲染
   form.render()
  })
 }

 // 需求3: 筛选
 $('#formSearch').on('submit', function (e) {
  // 阻止浏览器默认行为
  e.preventDefault()
  // 改分类和状态两个全局参数
  query.cate_id = $('[name=cate_id]').val()
  query.state = $('[name=state]').val()
  // 重新调用文章列表初始化方法(不是文章分类列表!!!)
  initArticleList()
 })

 // 需求4: 分页
 var laypage = layui.laypage

 function pageRender(total) {
  // console.log(total);
  //执行一个laypage实例
  laypage.render({
   elem: 'pageBox', //注意，这里的 test1 是 ID，不用加 # 号
   count: total, //数据总数，从服务端得到
   curr: query.pagenum, // 当前页
   limit: query.pagesize, // 每页显示多少条
   // 配置定制化的分页
   layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],
   limits: [2, 3, 4, 5, 10],
   jump: function (obj, first) {
    //obj包含了当前分页的所有参数，比如：
    // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
    // console.log(obj.limit); //得到每页显示的条数

    //首次不执行
    if (!first) {
     //do something
     // 修改参数 , 重新渲染页面
     query.pagenum = obj.curr
     query.pagesize = obj.limit
     // 重新渲染
     initArticleList()
    }
   }
  });
 }

 // 需求5 : 删除  通过事件委托
 $('tbody').on('click', '.btn-delete', function (e) {
  // 要在弹出层外获取id  , 因为在弹出层中this的指向就改变了
  let id = $(this).attr('data-id')
  // alert(id)
  // 弹出层
  layer.confirm('确认删除此文章吗?', {
   icon: 3,
   title: '提示'
  }, function (index) {
   //do something  发送请求
   axios({
    method: 'GET',
    url: '/my/article/delete/' + id
   }).then(res => {
    // 判断
    if (res.data.status != 0) {
     return layer.msg(res.data.message)
    }
    // 成功给出提示
    layer.msg('恭喜您,删除文章成功')
    // 如果当前页只剩一条数据,而且删除成功了. 那么 query.pagenum 自减
    // console.log($('.btn-delete').length);
    // 当前页面要大于2 , 没有第0页, 所有到第一页就不能减少了
    // if ($('.btn-delete').length == 1 && query.pagenum >= 2) {
    //  query.pagenum--
    // }
    // 优化: 利用逻辑与 &  的短路运算
    $('.btn-delete').length == 1 && query.pagenum >= 2 && query.pagenum--
    // 重新渲染页面
    initArticleList()
   })
   // 关闭弹出层
   layer.close(index);
  });
 })

})